<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用注册</title>
    <base href="<%=basePath%>"/>
    <link rel="stylesheet" href="statics/css/layui.css" media="all"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="statics/js/jquery-3.2.1.min.js"></script>
    <script src="statics/js/open.js"></script>
    <script src="statics/layui.js"></script>

    <style>
        body{
            background:url(statics/images/粉色天空.jpg);
            background-repeat:no-repeat;
            background-size:100%;
        }
        ul{width: 460px}
        li{width: 200px
        }
        .layui-form{width: 400px}
        .layui-tab{position:absolute;
            top:50%;
            left:50%;
            margin:-125px 0 0 -230px;
            width:460px;
            height:250px;
            border:1px solid #008800;
            background-color:transparent;}
    </style>
</head>
<body>
<div class="layui-tab">
    <ul class="layui-tab-title">
        <li class="layui-this">管理员登陆</li>
        <li>开发者登陆</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item layui-show">
            <form id="devForm">
                <br/>
                <div class="layui-form-item">
                    <label class="layui-form-label">请输入姓名:</label>
                    <div class="layui-input-inline">
                        <input type="text" name="devCode" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入用户名';}">
                    </div>
                </div>
                <br/>
                <div class="layui-form-item">
                    <label class="layui-form-label">请输入密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="devPassword" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入密码';}">
                    </div>
                </div>
                <br/>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <input type="button" lay-submit lay-filter="devLogin" value="立即提交" class="layui-btn">
                        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                        <button type="register" class="layui-btn layui-btn-register">注册</button>
                    </div>
                </div>
            </form>
            <div class="layui-tab-item">
                <form id="backForm">
                    <br/>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请输入姓名:</label>
                        <div class="layui-input-inline">
                            <input type="text" name="userName" required  lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入用户名';}">
                        </div>
                    </div>
                    <br/>
                    <div class="layui-form-item">
                        <label class="layui-form-label">请输入密码</label>
                        <div class="layui-input-inline">
                            <input type="password" name="userPwd" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = '请输入密码';}">
                        </div>
                    </div>
                    <br/>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn" lay-submit lay-filter="backLogin">立即提交</button>
                            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                            <button type="register" class="layui-btn layui-btn-register">注册</button>
                        </div>
                    </div>
                </form>
            </div>
            <script src="statics/js/jquery-3.2.1.min.js"></script>
            <script>
                layui.use(['form','element','jquery','layer'], function(){

                    var element = layui.element;
                    var form=layui.form;
                    //获取hash来切换选项卡，假设当前地址的hash为lay-id对应的值
                    var layid = location.hash.replace(/^#test1=/, '');//location.hash与HTML5 history类似，都能够在改变页面的URL而不会引起浏览器的重载  #代表网页中的一个位置。其右面的字符，就是该位置的标识符。比如，
                    element.tabChange('test1', layid); //假设当前地址为：http://a.com#test1=222，那么选项卡会自动切换到“发送消息”这一项

                    //监听Tab切换，以改变地址hash值
                    element.on('tab(test1)', function(){
                        location.hash = 'test1='+ this.getAttribute('lay-id');
                    });

                    //监听提交
                    form.on('submit(devLogin)',function(data){
                        var arr=$("#devForm").serialize();//可以把序列化的值传给ajax()作为url的参数，轻松使用ajax()提交form表单了，而不需要一个一个获取表单中的值然后传给ajax()

                        $.ajax({
                            url:"/AppManageSys/user/devLogin",
                            data:arr,
                            dataType:"JSON",
                            type:"POST",
                            success:function(data){
                                layer.msg(data);
                                if(data=="ok"){
                                    var index = layer.msg('登陆成功',{icon: 16,time:false,shade:0.5});
                                    //setInterval(layer.msg('正在进入主页面',{icon: 16,time:false,shade:0.5}), 3000);
                                    setInterval("login()",2000);
                                }else{
                                    var context='登陆失败';
                                    var index = layer.msg(context,{icon: 16,time:false,shade:0.5});
                                    setInterval(function(){
                                        layer.close(index);
                                    },2000);
                                }
                            }


                        });

                    })
                    form.on('submit(backlogin)',function(data){
                        var arr=$("#backForm").serialize();
                        $.ajax({
                            url:"/AppManageSys/user/backLogin",
                            data:arr,
                            dataType:"JSON",
                            type:"POST",
                            success:function(data){

                                if(data=="ok"){
                                    var index = layer.msg('登陆成功',{icon: 16,time:false,shade:0.5});
                                    //setInterval(layer.msg('正在进入主页面',{icon: 16,time:false,shade:0.5}), 3000);
                                    setInterval("login()",2000);//setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
                                }else if(data=="err"){
                                    var index = layer.msg('登陆失败',{icon: 16,time:false,shade:0.5});
                                    setInterval(function(){
                                        layer.close(index);
                                    },2000);
                                }else{
                                    var index = layer.msg('你不是管理员',{icon: 16,time:false,shade:0.5});
                                    setInterval(function(){
                                        layer.close(index);
                                    },2000);
                                }
                            }


                        });

                    })
                });

                function login(){
                    window.location.href="/AppManageSys/user/login";
                }

            </script>
</body>
</html>